// 剪裁插件的使用步骤
// 1.初始化 --> 得到一个剪裁框
let image = $('#image')
let option = {
  // 约束剪裁比例 1:1
  aspectRatio: 1,
  // 指定预览区域
  preview: '.img-preview'
}
image.cropper(option)
// 2.调用方法
// 剪裁插件的方法语法 image.cropper('方法名',....方法的参数)



// 3.-----------------点击上传按钮,触发文件域的单击事件--------
$('button:contains("上传")').on('click', function () {
  // 触发文件域的单击事件
  $('#file').trigger('click')
})




// 4.文件域内容改变，更换剪裁区图片
$('#file').on('change', function () {
  if (this.files.length > 0) {
    // 获取文件对象
    let fileObj = this.files[0]
    // 创建url
    let url = URL.createObjectURL(fileObj)
    // 更换剪裁区的图片
    $('#image').cropper('replace', url)
  }
})


// 5.点击确定，剪裁图片，转化格式，ajax提交
$('button:contains("确定")').on('click', function () {
  // 调用插件的语法，剪裁
  let canvas = $('#image').cropper('getCroppedCanvas', { width: 30, height: 30 })
  // 转成base64格式
  let str = canvas.toDataURL('image/jpeg', 0.5)
  // 提交这个base64格式的字符串给接口
  $.ajax({
    type: 'POST',
    url: '/my/user/avatar',
    data: { avatar: str },
    success: function (res) {
      layer.msg(res.message)
      if (res.status === 0) {
        // 调用父页面的函数
        window.parent.getUserInfo()
      }
    }
  })
})


